<template>
  <div id="items">
    <div class="listCard" v-for="l in lists" :key="l.title">
      <div class="left">
        <div class="fonts">{{l.title}}</div>

        <div v-for="s in l.song" :key="s.title">
            <span class="fonts" style="font-size:13px">
                {{s.rank}}</span>.{{s.title}}-
                <span class="author">{{s.singerName}}</span>
            </div>
        <!-- <div>1.哈哈哈</div>
            <div>2.哈哈哈</div>
        <div>3.哈哈</div>-->  
      </div>
      <div class="right">
        <img :src="l.headPicUrl" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      list: [
        {
          topId: 4,
          recType: 10005,
          topType: 0,
          updateType: 1,
          title: "流行指数榜",
          titleDetail: "流行指数榜 第317天",
          titleShare: "流行指数榜 2019年第317天",
          titleSub: "",
          intro:
            "追踪全球音乐流行趋势，乐坛最热门歌曲，网络蹿红歌曲根据地。展示QQ音乐用户的关注热度，体现歌曲飙升程度的潮流音乐排行榜。<br><br>更新时间：每天更新<br>歌曲数量：100首<br>统计算法：QQ音乐库内全部歌曲，根据综合数据7天前的涨幅进行排序，取前100名<br>综合数据：登录用户在QQ音乐播放/分享/下载数据",
          cornerMark: 0,
          period: "2019-11-13",
          updateTime: "2019-11-13",
          history: {
            year: [],
            subPeriod: []
          },
          listenNum: 19900000,
          totalNum: 100,
          song: [
            {
              rank: 1,
              rankType: 6,
              rankValue: "194%",
              recType: 0,
              songId: 244499239,
              vid: "",
              albumMid: "002auLbZ4cxhiY",
              title: "那男孩还好吗",
              singerName: "Uu",
              singerMid: "003yGiqM2qF7Gm"
            },
            {
              rank: 2,
              rankType: 6,
              rankValue: "158%",
              recType: 0,
              songId: 244497931,
              vid: "",
              albumMid: "003K2eEI2aPyyh",
              title: "一生与你擦肩而过",
              singerName: "阿悠悠",
              singerMid: "002oKQfI4E0PBk"
            },
            {
              rank: 3,
              rankType: 6,
              rankValue: "130%",
              recType: 0,
              songId: 244434580,
              vid: "",
              albumMid: "004fruD912fLJ9",
              title: "贰叁",
              singerName: "吴亦凡",
              singerMid: "002yeznU3VAVEV"
            }
          ],
          headPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000000RKvUs0LcoZJ.jpg",
          frontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R300x300M000000bn8Ta2xrznf.jpg",
          mbFrontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T002R300x300M000002auLbZ4cxhiY.jpg",
          mbHeadPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M00000214XC02p3c0m.jpg",
          pcSubTopIds: [],
          pcSubTopTitles: [],
          subTopIds: [],
          adJumpUrl: "",
          h5JumpUrl: "",
          url_key: "",
          url_params: "",
          tjreport: "2_1_0_1_10005_4",
          rt: 0,
          updateTips: "每日更新",
          bannerText: "",
          AdShareContent: "流行指数榜 2019年第317天",
          abt: ""
        },
        {
          topId: 26,
          recType: 10005,
          topType: 0,
          updateType: 0,
          title: "热歌榜",
          titleDetail: "热歌榜 第44周",
          titleShare: "热歌榜 2019年第44周",
          titleSub: "",
          intro:
            "一周最具人气歌曲排行榜，旨在体现QQ音乐用户每周播放热度变更，为你展示当下热门优质有单曲循环价值的歌曲。<br><br>更新时间：每周四更新<br>排名数量：300首<br>统计算法：QQ音乐库内所有歌曲，根据综合数据7天前的涨幅进行排序，取前300名<br>综合数据：登录用户在QQ音乐播放/分享/下载数据",
          cornerMark: 0,
          period: "2019_44",
          updateTime: "2019-11-07",
          history: {
            year: [2019, 2018],
            subPeriod: [
              [
                44,
                43,
                42,
                41,
                40,
                39,
                38,
                37,
                36,
                35,
                34,
                33,
                32,
                31,
                30,
                29,
                28,
                27,
                26,
                25,
                24,
                23,
                22,
                21,
                20,
                19,
                18,
                17,
                16,
                15,
                14,
                13,
                12,
                11,
                10,
                9,
                8,
                7,
                6,
                5,
                4,
                3,
                2,
                1,
                0
              ],
              [
                51,
                50,
                49,
                48,
                47,
                46,
                45,
                44,
                43,
                42,
                41,
                40,
                39,
                38,
                37,
                36,
                35,
                34,
                33,
                32,
                31,
                30,
                29,
                28,
                27,
                26,
                25,
                24,
                23,
                22,
                21,
                20,
                19,
                18,
                17,
                16,
                15,
                14,
                13,
                12,
                11,
                10,
                9,
                8,
                7,
                6,
                5,
                4,
                3,
                2,
                1,
                0
              ]
            ]
          },
          listenNum: 19200000,
          totalNum: 300,
          song: [
            {
              rank: 1,
              rankType: 3,
              rankValue: "0",
              recType: 0,
              songId: 242254267,
              vid: "",
              albumMid: "002ZAHJs3IIZN7",
              title: "悬溺",
              singerName: "葛东琪",
              singerMid: "000FitP93WHhtY"
            },
            {
              rank: 2,
              rankType: 1,
              rankValue: "1",
              recType: 0,
              songId: 235802819,
              vid: "",
              albumMid: "002lJJi244utqN",
              title: "嚣张",
              singerName: "en",
              singerMid: "001IkitI4Gcu5u"
            },
            {
              rank: 3,
              rankType: 4,
              rankValue: "0",
              recType: 0,
              songId: 244150512,
              vid: "",
              albumMid: "002ShXM42YfEce",
              title: "念想",
              singerName: "易烊千玺",
              singerMid: "001IoTZp19YMDG"
            }
          ],
          headPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000000Nz34s4XElkF.jpg",
          frontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R300x300M000000jSbir3bdWVT.jpg",
          mbFrontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T002R300x300M000002ZAHJs3IIZN7.jpg",
          mbHeadPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000001WhN1Q2Up4gi.jpg",
          pcSubTopIds: [],
          pcSubTopTitles: [],
          subTopIds: [],
          adJumpUrl: "",
          h5JumpUrl: "",
          url_key: "",
          url_params: "",
          tjreport: "2_1_0_2_10005_26",
          rt: 0,
          updateTips: "每周更新",
          bannerText: "",
          AdShareContent: "热歌榜 2019年第44周",
          abt: ""
        },
        {
          topId: 27,
          recType: 10005,
          topType: 0,
          updateType: 1,
          title: "新歌榜",
          titleDetail: "新歌榜 第317天",
          titleShare: "新歌榜 2019年第317天",
          titleSub: "",
          intro:
            "集结30天内发行的优质歌曲，鼓励原创、着眼未来的乐坛风向标。根据每日综合数据进行排序，体现QQ音乐用户追新潮流，致力于打造最权威最有公信力的专业健康的新歌排行榜。<br><br>歌曲数量：100首<br>综合数据：登录用户在QQ音乐收听/分享/下载数据",
          cornerMark: 0,
          period: "2019-11-13",
          updateTime: "2019-11-13",
          history: {
            year: [],
            subPeriod: []
          },
          listenNum: 1960000,
          totalNum: 100,
          song: [
            {
              rank: 1,
              rankType: 3,
              rankValue: "0",
              recType: 0,
              songId: 242254267,
              vid: "",
              albumMid: "002ZAHJs3IIZN7",
              title: "悬溺",
              singerName: "葛东琪",
              singerMid: "000FitP93WHhtY"
            },
            {
              rank: 2,
              rankType: 3,
              rankValue: "0",
              recType: 0,
              songId: 240303515,
              vid: "",
              albumMid: "003RYoNv0cFaSx",
              title: "野狼Disco（feat.陈伟霆）",
              singerName: "宝石Gem/陈伟霆",
              singerMid: "002RjVgP3sbc0f"
            },
            {
              rank: 3,
              rankType: 3,
              rankValue: "0",
              recType: 0,
              songId: 244499239,
              vid: "",
              albumMid: "002auLbZ4cxhiY",
              title: "那男孩还好吗",
              singerName: "Uu",
              singerMid: "003yGiqM2qF7Gm"
            }
          ],
          headPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000004HxGSd0eaNa2.jpg",
          frontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R300x300M000002YaQYc46T1PX.jpg",
          mbFrontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T002R300x300M000002ZAHJs3IIZN7.jpg",
          mbHeadPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000000Yaz6s0uf7jq.jpg",
          pcSubTopIds: [],
          pcSubTopTitles: [],
          subTopIds: [],
          adJumpUrl: "",
          h5JumpUrl: "",
          url_key: "",
          url_params: "",
          tjreport: "2_1_0_3_10005_27",
          rt: 0,
          updateTips: "每日更新",
          bannerText: "",
          AdShareContent: "新歌榜 2019年第317天",
          abt: ""
        },
        {
          topId: 62,
          recType: 10005,
          topType: 0,
          updateType: 1,
          title: "飙升榜",
          titleDetail: "飙升榜 第317天",
          titleShare: "飙升榜 2019年第317天",
          titleSub: "",
          intro:
            "彰显火速窜红歌曲飙升趋势的音乐排行榜，强势展现QQ音乐用户每天歌曲播放量变化趋势。<br><br>更新时间：每天更新<br><br>歌曲数量：100首<br><br>统计算法：QQ音乐库内全部歌曲，根据完整播放数据对比前一日涨幅进行排序，取前100名",
          cornerMark: 0,
          period: "2019-11-13",
          updateTime: "2019-11-13",
          history: {
            year: [],
            subPeriod: []
          },
          listenNum: 9600000,
          totalNum: 100,
          song: [
            {
              rank: 1,
              rankType: 6,
              rankValue: "80%",
              recType: 0,
              songId: 244497931,
              vid: "",
              albumMid: "003K2eEI2aPyyh",
              title: "一生与你擦肩而过",
              singerName: "阿悠悠",
              singerMid: "002oKQfI4E0PBk"
            },
            {
              rank: 2,
              rankType: 6,
              rankValue: "17%",
              recType: 0,
              songId: 244744343,
              vid: "",
              albumMid: "001BDCKM0wGBnh",
              title: "节日快乐",
              singerName: "杨丞琳",
              singerMid: "000ZVS6E1f6f0d"
            },
            {
              rank: 3,
              rankType: 6,
              rankValue: "14%",
              recType: 0,
              songId: 212734081,
              vid: "",
              albumMid: "001M1Hvk2x4zPF",
              title: "宠爱吖",
              singerName: "白小白/球球",
              singerMid: "004GZcGF2ZgJYo"
            }
          ],
          headPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000002F3rCs0OMfxA.jpg",
          frontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R300x300M000004Y0sQh0REOcq.jpg",
          mbFrontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T002R300x300M000003K2eEI2aPyyh.jpg",
          mbHeadPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000003kux513vOaaK.jpg",
          pcSubTopIds: [],
          pcSubTopTitles: [],
          subTopIds: [],
          adJumpUrl: "",
          h5JumpUrl: "",
          url_key: "",
          url_params: "",
          tjreport: "2_1_0_5_10005_62",
          rt: 0,
          updateTips: "每日更新",
          bannerText: "",
          AdShareContent: "飙升榜 2019年第317天",
          abt: ""
        },
        {
          topId: 201,
          recType: 10010,
          topType: 0,
          updateType: 1,
          title: "MV榜",
          titleDetail: "MV榜 ",
          titleShare: "MV榜 ",
          titleSub: "",
          intro:
            "上榜规则：榜单中参与排名的MV范围必须是三个月内官方发行的MV，翻制版，预告版，花絮版，广告宣传片等不参与排名。<br><br>更新时间：榜单数据一小时更新一次<br>统计周期：一周（统计时间周一零点至周日24:00点）<br>统计算法：根据MV在一周内的有效播放、分享以及下载次数，由高到低取前20名。",
          cornerMark: 0,
          period: "",
          updateTime: "",
          history: {
            year: [],
            subPeriod: []
          },
          listenNum: 2249880,
          totalNum: 20,
          song: [
            {
              rank: 1,
              rankType: 0,
              rankValue: "",
              recType: 1,
              songId: 0,
              vid: "i0032que1l3",
              albumMid: "004fruD912fLJ9",
              title: "贰叁",
              singerName: "吴亦凡",
              singerMid: "002yeznU3VAVEV"
            },
            {
              rank: 2,
              rankType: 0,
              rankValue: "",
              recType: 1,
              songId: 0,
              vid: "i0032m5h6ul",
              albumMid: "002vzuym3ygjed",
              title: "真实伤害/True Damage - GIANTS",
              singerName: "英雄联盟/Becky G/Keke Palmer/田小娟",
              singerMid: "0000RHdG1ukDqy"
            },
            {
              rank: 3,
              rankType: 0,
              rankValue: "",
              recType: 1,
              songId: 0,
              vid: "l003273bvdk",
              albumMid: "003HmTZY2CV5yp",
              title: "FLOWER SHOWER",
              singerName: "泫雅 (현아)",
              singerMid: "0040tgjy2qm5bG"
            }
          ],
          headPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M0000032JvwJ2cHIf6.jpg",
          frontPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R300x300M000003mDxcD0qvvkR.jpg",
          mbFrontPicUrl:
            "https://y.gtimg.cn/music/common/upload/t_order_channel_hitlist_conf/1109255.jpg",
          mbHeadPicUrl:
            "http://y.gtimg.cn/music/photo_new/T003R500x500M000001S03O41Y0sux.jpg",
          pcSubTopIds: [],
          pcSubTopTitles: [],
          subTopIds: [],
          adJumpUrl:
            "http://y.qq.com/m/client/v5detail/mv.html?navpage=toplist",
          h5JumpUrl: "https://y.qq.com/m/client/video_rank_list/index.html",
          url_key: "v5detail_mv",
          url_params: "",
          tjreport: "2_1_0_8_10010_201",
          rt: 0,
          updateTips: "每10分钟更新",
          bannerText: "",
          AdShareContent: "MV榜 ",
          abt: ""
        }
      ],
      lists:[]
    };
  },
  mounted(){
    axios.get('http://localhost:3000/getList')
    .then(res => {
      this.lists = res.data.group[0].toplist
    })
  }
};
</script>

<style scoped>
#items {
  margin-top: 32%;
  overflow-x: hidden;
  /* position: relative; */
  /* width: 100%; */
  top: 58%;
  /* padding-left:2%;  */
  margin-left: 4%;
background-color: #F7F7F7;


}
.listCard {
  position: relative;
  height: 120px;
  width: 365px;
  /* background-color: aliceblue; */
  box-shadow: 1px 2px 4px white;
  background-color: white;
  border-radius: 10px;
  margin-bottom: 3%;

}
.left {
  position: absolute;
  width: 240px;
  height: 100px;
  top: 5%;
  left: 3%;
  font-size: 14px;
  /* background-color: aquamarine; */
}
.right {
  position: absolute;
  right: 1%;
  /* top: 4%; */
  width: 100px;
  height: 100%;
  /* background-color: antiquewhite; */
}

.right img {
  width: 118px;
  height: 120px;
  border-radius: 0 10px 10px 0px;

}

.fonts{
    font-weight:bold;
    font-size: 18px;
}

.author{
    color: rgba(26,26,26,.5);
}
</style>